<template>
  <div v-loading="fullscreenLoading">
    <el-row>
      <el-form style="width: 100%" :model="form">
        <el-row>
          <el-form-item style="width: 30%" label-width="20%" label="模组SN : ">
            <el-input v-model="form.sn" />
          </el-form-item>
          <el-form-item style="width: 30%" label-width="20%" label="注胶SN : ">
            <el-input v-model="form.modelsn" />
          </el-form-item>
          <el-form-item style="width: 30%" label-width="20%" label="上模 : ">
            <el-input v-model="form.duid" />
          </el-form-item>

          <el-form-item style="width: 10%" label-width="30%" label="">
            <el-button type="primary" :icon="Search" @click="submitForm">查询</el-button>
          </el-form-item>
        </el-row>
        <!-- <el-row>
          <el-form-item style="width: 35%" label-width="30%" label="FG CODE : ">
            <el-select style="width: 100%" v-model="form.fgcode" />
          </el-form-item>
          <el-form-item style="width: 35%" label-width="30%" label="旧工序 : ">
            <el-select style="width: 100%" v-model="form.operation" />
          </el-form-item>
        </el-row> -->
      </el-form>
    </el-row>

    <el-row style="margin-top: 8px">
      <el-table :data="storeDataList" border height="70vh" scrollbar-always-on>
        <el-table-column prop="productrequestname" label="工单" align="center" width="140px" fixed />

        <el-table-column prop="modelsn" label="注胶SN" align="center" width="220px" fixed />

        <el-table-column prop="eventtime" label="过站时间" align="center" width="170px" fixed />

        <el-table-column prop="lotname" label="Panel ID" align="center" width="185px" />

        <el-table-column prop="durableupid" label="上模ID" align="center" width="185px" />

        <el-table-column prop="uptimeused" label="上模使用次数" align="center" width="120px" />

        <el-table-column prop="durablecoreid" label="模仁ID" align="center" width="185px" />

        <el-table-column prop="coretimeused" label="模仁使用次数" align="center" width="120px" />

        <el-table-column prop="slgid" label="胶枪ID" align="center" />

        <el-table-column prop="machinename" label="设备ID" align="center" width="100px" />

        <el-table-column prop="productspecname" label="产品型号" align="center" width="210px" />

        <el-table-column prop="linename" label="线体" align="center" width="100px" />

        <el-table-column prop="oldprocessoperationname" label="旧工序" align="center" width="110px" />

        <el-table-column prop="olddescription" label="旧工序名称" align="center" width="110px" />

        <el-table-column prop="processoperationname" label="当前工序" align="center" width="110px" />

        <el-table-column prop="description" label="当前工序名称" align="center" width="110px" />

        <el-table-column prop="processflowname" label="工艺路线" align="center" width="160px" />

        <el-table-column prop="duedate" label="创建时间" align="center" width="170px" />

        <el-table-column prop="eventuser" label="用户ID" align="center" />

        <el-table-column prop="" label="用户名" align="center" />

        <el-table-column prop="moduleid" label="Module ID" align="center" width="120px" />

        <el-table-column prop="customerid" label="客户二维码" align="center" width="120px" />

        <el-table-column prop="ocid" label=" 排线码" align="center" />

        <el-table-column prop="oldproductiontype" label="生产类型" align="center" width="105px" />

        <el-table-column prop="lotstate" label="LOT状态" align="center" width="95px" />

        <el-table-column prop="lotprocessstate" label="进行状态" align="center" width="95px" />

        <el-table-column prop="lotholdstate" label=" Lot Hold状态" align="center" width="120px" />

        <el-table-column prop="processgroupname" label="外箱ID" align="center" width="130px" />

        <el-table-column prop="reworkstate" label="Rework状态" align="center" width="130px" />

        <el-table-column prop="eventcomment" label="备注" align="center" width="200px" />
      </el-table>
    </el-row>
    <el-row class="pagination-container">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="page"
        :page-sizes="[50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" />
    </el-row>
  </div>
</template>
<script setup name="lotHistory">
import { selectlotHistorylist } from '@/api/infoSerch/lotHistorySerch'
import _ from 'lodash'

const { proxy } = getCurrentInstance()
const state = reactive({
  form: {},
  storeDataList: [],
  storeList: []
})

const { form, storeDataList, storeList } = toRefs(state)
const fullscreenLoading = ref(false)
// 分页栏中的数据条数
const total = ref(0)
// 分页栏选中的页数
const page = ref(1)
// 每页显示的数据量
const pageSize = ref(50)

// 提交表单数据
function submitForm() {
  fullscreenLoading.value = true
  // 清除首尾空格
  //   for (var item in form.value) {
  //     console.log(logform.value[item].trim())
  //   }
  //   刷新表格
  storeDataList.value = []
  selectlotHistorylist(form.value).then((res) => {
    // storeDataList.value = res.data
    // 获得数据条数
    total.value = res.data.length
    // 暂存数据
    storeList.value = res.data
    getTableData()
  })
}
// 获得的数据导入表格
function getTableData() {
  storeDataList.value = storeList.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
  fullscreenLoading.value = false
}
// val为分页栏中选中的页数
function currentChange(val) {
  // console.log(val)
  page.value = val
  getTableData()
}
// val为分页栏中选中的每页数据量
function sizeChange(val) {
  pageSize.value = val
  page.value = 1 // 切换每页数据量时，重置为第一页
  getTableData()
}
</script>
<style scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end; /* 右对齐 */
}
</style>
